<template>
  <div>
    <el-card class="card">
      <div slot="header" class="clearfix">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="/lejuAdmin/material/uploadFileOssSave"
          :file-list="file"
          :on-success="uploadSuccess"
          :headers="header"
        >
          <el-button size="small" type="primary">点击上传素材</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>

      <el-row :gutter="20">
        <el-col v-for="(item, index) in list" :key="index" style="margin-bottom: 20px;width:20%">
          <el-card>
            <div slot="header" class="clearfix">
              <time class="time">创建时间:{{ item.createTime }}</time>
            </div>
            <div class="card-main">
              <img :src="item.ossUrl" class="image">
              <div class="right">
                <el-button size="mini" type="danger" class="btn" @click="del(item)">删除</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-pagination
        :current-page="page.currentpage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { getToken } from '@/utils/myAuth'
import { findMaterialByPage, delMaterial } from '@/api/content/material'
export default {
  data() {
    return {
      list: [],
      page: {
        currentpage: 1,
        pageSizes: [10, 20, 30],
        pageSize: 10,
        total: 0
      },
      file: []
    }
  },
  computed: {
    header() {
      const token = getToken()
      return {
        token
      }
    }
  },
  created() {
    this.getlists()
  },
  methods: {
    // 获取素材列表
    getlists() {
      findMaterialByPage(this.page.currentpage, this.page.pageSize).then(res => {
        console.log(res)
        this.list = res.data.rows
        this.page.total = res.data.total
      })
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getlists()
    },
    handleCurrentChange(val) {
      this.page.currentpage = val
      this.getlists()
    },
    uploadSuccess(res) {
      // console.log(res)
      this.file = res.data.fileUrl
      this.$refs.upload.clearFiles()
      this.getlists()
    },
    del(item) {
      delMaterial(item.id).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getlists()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .card{
    margin: 30px;
    .clearfix{
      .time{
        font-size: 14px;
      }
    }
    .image{
      width: 100%;
      height: 250px;
    }
    .right{
      display: flex;
      flex-direction: row-reverse;
      .btn{
          width: 90px;
          margin-top: 20px;
        }
    }

  }
</style>
